<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>模拟表格全选单选</title>
    <style>
      table {
        border-collapse: collapse;
      }
    </style>
  </head>
  <body>
    <h1>模拟表格全选单选</h1>
    <p id="result" style="color: red; font-size: 22px"></p>
    <script>
      /// 【基础设定】
      ///     > 每页显示3条数据
      const data = [
        {
          merchandiseId: 1,
          putaway: true,
        },
        {
          merchandiseId: 2,
          putaway: false,
        },
        {
          merchandiseId: 3,
          putaway: true,
        },
        {
          merchandiseId: 4,
          putaway: false,
        },
        {
          merchandiseId: 5,
          putaway: true,
        },
      ]
      // 当前页数据
      let table_data = []
      const putaway = []
      // 当前复选框数据
      let obj = {
        tr: null,
        data: {},
        checked: false,
        type: 'all',
      }

      /// 【场景1】
      ///     > 前提1：处于第1页
      ///     > 现在操作：勾选全选复选框
      function scene1() {
        // 处于第1页
        // 勾选全选复选框
        obj.type = 'all'
        obj.checked = true
        table_data = pagination(1, 3, data)
      }
      /// 【场景2】
      ///     > 前提1：处于第1页
      ///     > 前提2：已经勾选了一条数据，假如id为2
      ///     > 现在操作：勾选全选复选框
      function scene2() {
        // 已经勾选了一条数据，假如id为2
        const row = data.find((x) => x.merchandiseId === 2)
        const { merchandiseId: id, putaway: flag } = row
        putaway.push({
          id,
          flag,
        })

        // 处于第1页
        // 勾选全选复选框
        obj.type = 'all'
        obj.checked = true
        table_data = pagination(1, 3, data)
      }
      /// 【场景3】
      ///     > 前提1：处于第1页
      ///     > 前提2：已经勾选了全选复选框
      ///     > 现在操作：取消勾选全选复选框
      function scene3() {
        // 处于第1页
        // 已经勾选了全选复选框
        obj.type = 'all'
        obj.checked = true
        table_data = pagination(1, 3, data)
        table_data.forEach((item) => {
          const { merchandiseId: id, putaway: flag } = item
          const findIndex = putaway.findIndex((x) => x.id === id)
          if (findIndex === -1) {
            putaway.push({
              id,
              flag,
            })
          }
        })

        // 取消勾选全选复选框
        obj.type = 'all'
        obj.checked = false
      }
      /// 【场景4】
      ///     > 前提1：处于第1页
      ///     > 现在操作：勾选一条数据，假如id为2
      function scene4() {
        // 处于第1页
        obj.type = 'one'
        obj.checked = true
        // 已经勾选了一条数据，假如id为2
        const row = data.find((x) => x.merchandiseId === 2)
        obj.data = { ...row }
      }
      /// 【场景5】
      ///     > 前提1：处于第1页
      ///     > 前提2：已经勾选了全选复选框
      ///     > 现在操作：取消勾选第2行的复选框，即id为2的行
      function scene5() {
        // 处于第1页
        // 已经勾选了全选复选框
        obj.type = 'all'
        obj.checked = true
        table_data = pagination(1, 3, data)
        table_data.forEach((item) => {
          const { merchandiseId: id, putaway: flag } = item
          const findIndex = putaway.findIndex((x) => x.id === id)
          if (findIndex === -1) {
            putaway.push({
              id,
              flag,
            })
          }
        })

        // 取消勾选第2行的复选框，即id为2的行
        obj.type = 'one'
        obj.checked = false
        const row = data.find((x) => x.merchandiseId === 2)
        obj.data = { ...row }
      }

      // 当前场景
      scene1() // 场景1
      // scene2() // 场景2
      // scene3() // 场景3
      // scene4() // 场景4
      // scene5() // 场景5

      const { type, checked } = obj
      // 勾选全选复选框
      if (type === 'all' && checked) {
        table_data.forEach((item) => {
          const { merchandiseId: id, putaway: flag } = item
          const findIndex = putaway.findIndex((x) => x.id === id)
          if (findIndex === -1) {
            putaway.push({
              id,
              flag,
            })
          }
        })
      } else if (type === 'all' && !checked) {
        // 取消勾选全选复选框
        table_data.forEach((item) => {
          const { merchandiseId: id } = item
          const findIndex = putaway.findIndex((x) => x.id === id)
          if (findIndex !== -1) {
            putaway.splice(findIndex, 1)
          }
        })
      } else if (type === 'one' && checked) {
        // 勾选单行复选框
        const { merchandiseId: id, putaway: flag } = obj.data
        const findIndex = putaway.findIndex((x) => x.id === id)
        if (findIndex === -1) {
          putaway.push({
            id,
            flag,
          })
        }
      } else if (type === 'one' && !checked) {
        // 取消勾选单行复选框
        const { merchandiseId: id } = obj.data
        const findIndex = putaway.findIndex((x) => x.id === id)
        if (findIndex !== -1) {
          putaway.splice(findIndex, 1)
        }
      }
      console.log('%cmain.js line:284 putaway', 'color: #007acc;', putaway)
      document.getElementById('result').innerHTML = JSON.stringify(putaway)

      // 分页函数
      function pagination(pageNo, pageSize, array) {
        var offset = (pageNo - 1) * pageSize
        return offset + pageSize >= array.length
          ? array.slice(offset, array.length)
          : array.slice(offset, offset + pageSize)
      }
    </script>
  </body>
</html>
